<template>
	<view class="comeUnit">
		<!-- 添加至设备出库单 页面-->
		<navBar title="添加至设备出库单" goBackUrl="/subpackage-equipment/pages/device/deviceCome/deviceCome" @goBack="goBack"></navBar>
		
		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="getstation">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2" @click="getPopupSelect">
					<view class="name">
						<image class="image" src="/subpackage-equipment/static/device.png" mode=""></image>
						<view class="fonzt active" v-if="deviceTypeName === ''">点击选择设备类型和名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				
				<view class="info">
					<checkbox-group @change="checkboxChange">
						<label v-for="item in deviceComeList" :key="item.id" class="label">
							<view class="item" >
								<view class="header">{{ item.deviceTypeName }}/{{ item.subDeviceTypeName }}</view>
								<view class="item-body">
									<view class="item-nav">
										<view class="name">设备编号：</view>
										<view class="value">{{ item.code }}</view>
									</view>
									<view class="item-nav">
										<view class="name">规格型号：</view>
										<view class="value">{{ item.specificationModel }}</view>
									</view>
									<!-- <view class="item-nav">
										<view class="name">存储区域：</view>
										<view class="value">{{ item.storageAreaName }}</view>
									</view> -->
									<view class="item-nav">
										<view class="name">基地名称：</view>
										<view class="value">{{ item.stationName }}</view>
									</view>
									<checkbox :value="item.isShowSelect"  class="color round checkbox" />
								</view>
							</view>
						</label>
					</checkbox-group>
				</view>
			</view>
		</scroll-view>
		
		
		<view class="button">
			<u-button type="primary" :loading="loading1" color="#65DDC7" @click="getSelectDevice">已选  ({{selectTotal}})</u-button>
			<u-button type="primary" :loading="loading2" text="确定" @click="submit"></u-button>
		</view>
		
		
		<!-- 选择基地 -->
		<u-picker
			:show="isShowStation" 
			:columns="stationList" 
			keyName="name" 
			:closeOnClickOverlay="true"
			@confirm="stationConfirm" 
			@cancel="stationCancel"> 
		</u-picker>
		
		<BaseSelect 
			:isShow="isShowPopupSelect" 
			:deviceTypeList="deviceTypeList"
			:titleObj="titleObj"
			@cancel="popupSelectCancel"
			@confrim="popupSelectConfrim">
		</BaseSelect>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import BaseSelect from "./baseSelect.vue"
	import { getStationList} from "@/api/baseManage/baseManage.js"
	import { getDeviceType, getDeviceList } from "@/api/emergency/emergencyDispatch.js"
	import { mapMutations, mapState } from "vuex"
	import filterArray from "@/utils/filterArray.js"
	export default{
		name: "comeUnit",
		components: {
			navBar, baseInput, BaseSelect
		},
		data() {
			return {
				isShowPopupSelect: false,
				loading1: false,
				loading2: false,
				stationList: [],        // 基地列表数据
				isShowStation: false,   
				stationName: "",
				deviceTypeList: [],     // 设备数据,
				deviceComeList: [],     // 设备出库列表
				deviceTypeName: "",     // 筛选的数据
				selectTotal: 0,         // 选中设备的数量
				obj: {
					stationIds: [],      // 基地id
					deviceTypeIds: [], // 筛选的设备数据
				},
				titleObj: {
					title: "设备类别及设备名称筛选",
					deviceType: "设备类型",
					deviceName: "设备名称"
				}
			}
		},
		onShow() {
			if(this.checkBoxSelectList.length > 0){
				this.selectTotal = this.checkBoxSelectList.length
			}
			this.deviceComeList = []
			this.getStationList()
			this.getDeviceType()
			this.getDeviceList()
		},
		computed: {
			...mapState('device',['deviceComeSelcetList', 'checkBoxSelectList'])
		},
		methods:{
			...mapMutations('device', ["getDeviceComeSelcetList", "getCheckBoxSelectList"]),
			getstation(){
				this.isShowStation = true
			},
			
			// 基地的取消事件
			stationCancel(){
				this.isShowStation = false
				this.obj.stationIds = []
				this.stationName = ""
				this.getDeviceList(this.inputValue)
			},
			
			// 基地的 confirm 事件
			stationConfirm(data){
				console.log(data)
				this.obj.stationIds = [data.value[0].id]
				this.isShowStation = false
				this.stationName = data.value[0].name
				this.getDeviceList(this.inputValue)
			},
			
			// checkbox 的change事件
			checkboxChange(e){
				console.log(e.detail.value,'0000000000')
				this.checkboxSelectArr = e.detail.value    // checkbox选中的项组成的数组
				this.selectTotal = this.checkboxSelectArr.length + this.checkBoxSelectList.length
				console.log(this.checkboxSelectArr, this.selectTotal)
			},
			
			// 跳转到已选中设备页面
			getSelectDevice(){
				if(this.loading1) return
				this.loading1 = true
				this.getStorageVuex()
				uni.navigateTo({
					url: "/subpackage-equipment/pages/device/deviceCome/components/selectDevice"
				})
				this.loading1 = false
			},
			
			getStorageVuex(){
				let arr = []
				if(this.checkboxSelectArr && this.checkboxSelectArr.length>0){
					arr = this.deviceComeList.filter(item=>{
						return this.checkboxSelectArr.find(value=> item.id === value+"")
					})
					
					arr = [...arr,...this.deviceComeSelcetList]
					this.checkboxSelectArr = [...this.checkboxSelectArr,...this.checkBoxSelectList]
					// 存储到vuex中
					this.getDeviceComeSelcetList(arr)
					this.getCheckBoxSelectList(this.checkboxSelectArr)
				}else{
					arr = []
					this.checkboxSelectArr = []
				}
			},
			
			// 选择设备类型筛选
			getPopupSelect(){
				this.isShowPopupSelect = true
			},
			
			// 取消 设备筛选
			popupSelectCancel(){
				this.obj.deviceTypeIds = []
				this.deviceTypeName = ""
				this.isShowPopupSelect = false
				this.getDeviceList(this.inputValue)
			},
			
			// 确定 设备筛选
			popupSelectConfrim(deviceList,selectDeviceTypeList, selectDeviceNameList){
				console.log(deviceList, selectDeviceTypeList,selectDeviceNameList)
				this.isShowPopupSelect = false
				let list = []
				this.deviceTypeList.forEach(item=>{
					selectDeviceTypeList.forEach(value=>{
						if(item.id === value){
							list.push(item.name)
						}
					})
				})
				this.deviceTypeName = list.join(",")
				this.obj.deviceTypeIds = selectDeviceNameList
				this.getDeviceList(this.inputValue)
			},
			
			// 基地列表数据
			getStationList(){
				getStationList({typeIds: [102,104], name: ""}).then(res=>{
					this.stationList = [res.result]
					console.log(this.stationList)
				}) 
			},
			
			// 获取所有设备出库数据
			getDeviceList(inputValue){
				getDeviceList(this.obj).then(res=>{
					this.deviceComeList = res.result.map(item=>({...item,isShowSelect: item.id+"", id: item.id +""}))
					// 过滤选中的(把选中的去掉)(满足条件的过滤掉)
					this.deviceComeList = this.deviceComeList.filter(item=>{
						return !this.checkBoxSelectList.find(value=> item.id === value)
					})
					
					if(inputValue){
						// 返回满足条件的
						this.deviceComeList = this.deviceComeList.filter(item=>{
							if(item.deviceTypeName.includes(inputValue) || item.name.includes(inputValue)){
								return item
							}
						})
						console.log(this.deviceComeList,'deviceComeList')
					}
					console.log(this.deviceComeList,'deviceComeList', this.checkBoxSelectList)
				})
			},
			
			// 设备数据
			async getDeviceType(){
				let _data ={
					name: "",
					ex1: 'equipment',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				let list = res.result.map(item=>({ ...item, isChecked: false, id: item.id + ""}))
				let arr2 = list.filter(item=>item.treeLevel === 2).map(val=>({...val, childrenList:[]}))
				let arr3 = list.filter(item=>item.treeLevel === 3)
				
				arr2.forEach(item=>{
					arr3.forEach(value=>{
						if(item.id === value.parentId+""){
							item.childrenList.push({...value, tempCode: item.id + '-' + value.id})
						}
					})
				})
				this.deviceTypeList = arr2
				// console.log(this.deviceTypeList,'deviceComeList')
			},
			
			// 返回上一级
			goBack(url){
				// uni.navigateBack({
				// 	url: url
				// })
				uni.navigateBack({})
			},
			
			// 点击 确定
			submit(){
				if(this.loading2) return
				this.loading2 = true
				this.getStorageVuex()
				uni.redirectTo({
					url: '/subpackage-equipment/pages/device/deviceCome/deviceCome'
				});
				this.loading2 = false
			},
			
			// input的input事件
			inputChange(e){
				this.inputValue = e
				// if(this.inputValue){
					// clearTimeout(this.time)
					// this.time = setTimeout(()=>{
						this.getDeviceList(this.inputValue)
					// }, 500)
				// }
				
			},
			
			// input的 清空数据事件
			clearInput(){
				this.getDeviceList()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.comeUnit{
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		padding-bottom: 80rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		.search{
			padding: 0rpx 30rpx;
			padding-bottom: 24rpx;
		}
		.scroll-box{
			max-height: calc(100vh - 367rpx);
			padding-top: 10rpx;
		}
		.content{
			background-color: #F5F7FA;
			// max-height: calc(100vh - 385rpx);
			padding: 24rpx 32rpx;
		}
		.nav2{
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
				display: flex;
				align-items: center;
				.fonzt{
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;	
					color: #445469;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.active{
					color: #C0C0C0;
				}
				.image{
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}
		
		.info{
			margin-top: 30rpx;
			.item{
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 20rpx;
				.header{
					font-size: 30rpx;
					line-height: 88rpx;
					font-weight: bold;
					color: #445469;
					height: 88rpx;
					border-bottom: 2rpx solid #E2E5ED;
					padding-left: 35rpx;
				}
				.item-body{
					position: relative;
					padding: 26rpx 35rpx;
					padding-bottom: 10rpx;
					
					.item-nav{
						display: flex;
						font-size: 28rpx;
						font-weight: 500;
						color: #445469;
						margin-bottom: 18rpx;
						.name{
							width: 160rpx;
						}
						.value{
							flex: 1;
						}
					}
				}
			}
			.checkbox{
				position: absolute;
				top: 25rpx;
				right: 25rpx;
			}
		}
		.button{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			
		}
	}
</style>
